<template>
  <div class="app-container">
    <!-- 查询条件表单栏 -->
    <el-card v-if="formItems" class="box-card">
      <el-row v-for=" (fi, idx) in mergedFormItem" :key="idx" :gutter="20">
        <div v-for="item in fi" :key="item.order">
          <el-col :span="2" style="margin-top: 20px">
            <span v-if="item.type !== 'Button'" style="line-height: 40px;font-size:1em">{{ item.label }}:</span>
          </el-col>
          <el-col :span="4" style="margin-top: 20px">
            <!-- 输入框 -->
            <el-input v-if="item.type === 'Input'" v-model="formData[item.paramName]" type="text" clearable />
            <!-- 下拉选择框 -->
            <el-select v-if="item.type === 'Select'" v-model="formData[item.paramName]" :multiple="item.multiple" type="text" clearable>
              <el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value" />
            </el-select>
            <!-- 级联下拉框 -->
            <el-cascader v-if="item.type === 'GroupSelect'" v-model="formData[item.paramName]" :props="{multiple: item.multiple, emitPath: false}" :options="item.options" :show-all-levels="false" clearable />
            <!-- 数字框 -->
            <el-input v-if="item.type === 'Number'" v-model="formData[item.paramName]" type="number" />
            <!-- 日期框 -->
            <el-date-picker v-if="item.type === 'Date'" v-model="formData[item.paramName]" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
            <!-- 时间日期框 -->
            <el-date-picker v-if="item.type === 'Datetime'" v-model="formData[item.paramName]" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
            <!-- 年份日期框 -->
            <el-date-picker v-if="item.type === 'Year'" v-model="formData[item.paramName]" type="year" value-format="yyyy" format="yyyy" />
            <!-- 按钮 -->
            <el-button v-if="item.type === 'Button'" :type="item.btnType||'primary'" @click="item.clickHandler">{{ item.btnName || '按钮' }}</el-button>
          </el-col>
        </div>
      </el-row>
    </el-card>

    <!-- 操作按钮栏 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <el-row :gutter="20">
        <el-col v-for="item in btnItems" :key="item.order" :span="1.8">
          <el-button :type="item.type" @click="item.clickHandler">{{ item.name }}</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 数据分页表格栏 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <PaginatedTable :page-colums="pageColums" :page-data="pageData" :selection-change-handler="selectionChangeHandler" />
    </el-card>

  </div>
</template>

<script>
import PaginatedTable from '@/components/PaginatedTable'

export default {
  name: 'CrudView',
  components: { PaginatedTable },
  props: ['formData', 'formItems', 'btnItems', 'pageColums', 'pageData', 'selectionChangeHandler'],
  data: function() {
    return {
    //   pageColums: [
    //     { label: '姓名', propName: 'name' },
    //     { label: '年龄', propName: 'age' }
    //   ],
    //   pageData: {
    //     pageInfo: {
    //       pageNum: 1, // 当前页
    //       pageSize: 5, // 每页行数
    //       total: 9 // 列表总行数
    //     },
    //     list: [ // 数据列表
    //       { name: '111', age: 14 },
    //       { name: '111', age: 15 },
    //       { name: '111', age: 16 },
    //       { name: '111', age: 17 },
    //       { name: '111', age: 18 },
    //       { name: '111', age: 19 },
    //       { name: '111', age: 20 },
    //       { name: '111', age: 21 },
    //       { name: '111', age: 22 }
    //     ]
    //   }
    //   formData: {
    //     name: '5',
    //     age: 0,
    //     gender: 1,
    //     brithDate: '2001-09-20',
    //     attendance: '2019-06-06 11:11:11'
    //   },
    //   formItems: [
    //     { order: 1, label: '姓名', type: 'Input', paramName: 'name' },
    //     { order: 2, label: '年龄', type: 'Number', paramName: 'age' },
    //     { order: 3, label: '性别', type: 'Select', paramName: 'gender', options: [{text: '男', value: 0 },{text: '女', value: 1 }] },
    //     { order: 4, label: '生日', type: 'Date', paramName: 'brithDate' },
    //     { order: 5, label: '出席时间', type: 'Datetime', paramName: 'attendance' }
    //   ],
    //   btnItems: [
    //     { order: 1, name: '编辑', type: 'primary', clickHandler: () => console.log('响应按钮单击') },
    //     { order: 2, name: '删除', type: 'danger' },
    //     { order: 3, name: '添加', type: 'success' },
    //     { order: 4, name: '其它操作', type: 'dfault' }
    //   ]
    }
  },
  computed: {
    mergedFormItem() {
      const formItems = this.formItems
      const chunk = 4
      const res = []
      for (let i = 0; i < formItems.length; i += chunk) {
        res.push(formItems.slice(i, i + chunk))
      }
      return res
    }
  },
  methods: {

  }
}
</script>

<style>

</style>
